<template>
    <div>
        <div class="top">
            <div class="header">
                <a>
                    <span>百杉进销存管理系统</span>
                </a>
            </div>
        </div>

        <!-- 登录界面 -->

        <div class="Login">
            <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">

                <a-form-model-item prop="username">
                    <a-steps :current="current" @change="onChanger">
                        <a-step title="用户账户" description="" />
                        <a-step title="手机验证" description="" />
                        <a-step title="密码" description="" />
                        <a-step title="完成" description="" />
                    </a-steps>

                </a-form-model-item>

                <a-form-model-item prop="username">
                    <a-input v-model="ruleForm.username" placeholder="请输入用户账户或手机号" id="a-input-right">
                        <a-icon slot="prefix" type="user" />
                    </a-input>

                </a-form-model-item>
                <a-form-model-item prop="code" class="identify">
                    <a-input v-model="ruleForm.captcha" placeholder="请输入验证码" id="a-input-left">
                        <a-icon slot="prefix" type="smile" />
                    </a-input>
                    <img :src="imgcode" @click="getCaptcha">
                </a-form-model-item>

                <a-form-model-item>
                    <a-button type="link" id="link-up" @click="onsubit">
                        使用已有账户登录
                    </a-button>
                    <a-button type="primary" id="link-down">
                        下一步
                    </a-button>


                </a-form-model-item>


            </a-form-model>
        </div>



</div>
</template>
   
<script>





import { getCode, login } from "@/api/login";
export default {
    name: "PasswordView",
    data() {
        let validateCode = (value, callback) => {
            if (value === "") {
                callback(new Error("验证码为空"));
                return false;
            } else if (value !== this.identifyCode) {
                callback(new Error("验证码不正确"));
                return false;
            } else {
                callback();
            }
        };
        return {
            time13: '',
            time10: '',
            imgcode: '',
            identifyCodes: "1234567890",
            identifyCode: "",
            ruleForm: {
                username: "",
                password: "",
                resname: "",
                resword: "",
                code: "",
            },
            current: 0,
            rules: {
                name: { required: true, message: "请输入邮箱/手机号", trigger: "blur" },
                password: { required: true, message: "请输入密码", trigger: "blur" },
                code: [{ validator: validateCode, trigger: "blur" }],
            },
        };
    },
    created() {
        this.getCaptcha()
    },
    mounted() {
        // 初始
        this.identifyCode = "";
        this.makeCode(this.identifyCodes, 4);
    },
    methods: {
        // 确认
        async onSubmit() {
            const p = {
                captcha: this.ruleForm.captcha,
                checkKey: this.time13,
                password: this.ruleForm.password,
                remember_me: true,
                username: this.ruleForm.username
            }
            const res = await login(p)

            localStorage.setItem('token', res.result.token)
            location.href = '/'

            // }

        },
        onChanger(current) {
            console.log('onChange:', current);
            this.current = current;
        },
        resgister() {
            this.$router.replace('/resgister')
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 验证码相关
        //获取验证码编码
        async getCaptcha() {
            console.log("开始")
            this.time13 = Date.now()
            this.time10 = JSON.stringify(this.time13).substring(0, 10)
            const p = {
                _t: this.time10
            }

            await getCode(p, this.time13).then(res => {
                if (res.success) {
                    console.log("成功")
                    this.imgcode = res.result
                } else {
                    this.$message.error(res.message)
                }
            }).catch(() => {
                console.log("失败")
            })
        },
        callback(key) {
            console.log(key);
        },
        onsubit(){
            this.$router.replace('/login')
        },
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
        },
        // 点击刷新验证码
        refreshCode() {
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
        },
        // 生成验证码
        makeCode(o, l) {
            for (let i = 0; i < l; i++) {
                this.identifyCode +=
                    this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
            }
        },
        onChange(e) {
            console.log(`checked = ${e.target.checked}`);
        },
    },
};
</script>
   
<style lang="scss" scoped>
.Login {
    width: 100%;
    height: 100%;

    .title {
        font-size: 40px;
        font-weight: bold;
        padding: 60px 0 60px 40px;
    }

    .ant-form {
        width: 34%;
        border-radius: 5px;
        background: #fff;
        margin: auto;
        padding: 18px 40px;
        // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        .ant-dropdown-trigger {
            float: right;
            margin-right: -20px;
        }

        h5 {
            font-size: 26px;
            text-align: center;
            margin-bottom: 25px;
        }
    }

    @media screen and (min-width: 769px) and (max-width: 1000px) {
        .title {
            font-size: 50px;
            text-align: center;
        }

        .ant-form {
            width: 60%;
        }
    }

    @media screen and (max-width: 769px) {
        .title {
            font-size: 50px;
            text-align: center;
        }

        .ant-form {
            width: 90%;
        }
    }
}
</style>
<style lang="scss">
// 验证码样式
.Login .identify .ant-form-item-children {
    display: flex;
    align-items: center;

    .ant-input {
        flex: 1;
        margin-right: 10px;
    }
}

.ant-tabs-ink-bar {
    width: 50% !important;
}

.el-tabs__header {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.top {
    margin-top: 8%;
    text-align: center;
    margin-bottom: 2%;
}

.top .header {
    height: 10%;
    line-height: 2%;
}

.top .header span {
    font-size: 33px;
    color: rgba(0, 0, 0, .65);
    font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: 600;
    position: relative;
    top: 2px;
}
#link-up{
    margin-left: 3%;
}
#link-down{
    margin-left:31%;
}

.a-icon-left {
    font-size: 200%;
    margin-left: 5%;
    cursor: pointer;
}

.a-icon-right {
    font-size: 200%;
    margin-left: 5%;
    cursor: pointer;
}
#a-input-left{
    width:90%;
    height:40px;
}
#a-input-right{
    height:40px;
}
</style>
  